<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path"  value="${pageContext.request.contextPath}"/>

 
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<ul>
					<li>
						<a href="${path }/toindex">首页</a>
					</li>
					<li>
						<a href="${path}/productlist">手机数码</a>
					</li>
					<li>
						<a href="##">电脑办公</a>
					</li>
					<li>
						<a href="##">衣服用品</a>
					</li>
					<li>
						<a href="##">
							<img src="img/title.png" />
						</a>
					</li>
					<li>
						<a href="${path }/tocart">
						<i class="iconcart"></i>
						<span >购物车</span>
						</a>
					</li>

					<li>
						<a href="${path }/toorderlist">
						<span >我的订单</span>
						</a>
					</li>
					
					<li>
						<a href="${path }/tologin">
						<span >退出登录</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="content">
			<div class="bigimg" style="position: relative;">
			    <a href="##" id="biglink">
				    <img src="img/mybanner1.jpg" width="1519" id="bigimg"/>
			    </a>
			    <ul class="point" id="point" style="position: absolute;   left: 50%;  top:80%">
			    	<li index=1 class="dot"></li>
			    	<li index=2 class="dot"></li>
			    	<li index=3 class="dot"></li>
			    	<li index=4 class="dot"></li>
			    	<li index=5 class="dot"></li>
			    </ul>
			    <div class="sideleft" onclick="pre();"></div>
			    <div class="sideright" onclick="next();"></div>
		    </div>
		    <div class="imglist">
		    	<ul>
		    		<li>
		    			<a>
		    				<img src="img/list11.jpg" />
		    			</a>
		    		</li>
		    		<li>
		    			<a>
		    				<img src="img/list22.jpg" />
		    			</a>
		    		</li>
		    		<li>
		    			<a>
		    				<img src="img/list33.jpg" />
		    			</a>
		    		</li>
		    	</ul>
		    </div>
		    <div class="boxa" id="a">
		    		<img class="posabs" src="img/img-2-b.png"> 
    		    	<img src="img/img-2-b.jpg" style="margin-left: -10.5px; opacity: 1;"> 
   		    </div>
		    <div class="flipper">
		    <div class="wrapper">
   		    	<div class="boxa" id="front">
		    		<img class="posabsa" src="img/img-3-b.png"> 
    		    	<img src="img/img-3-b.jpg" style="margin-left: -10.5px; opacity: 1;"> 
   		    	</div>
   		    	<div class="boxa" id="back">
		    		<img class="posabsc" src="img/img-4-b.png"> 
    		    	<img src="img/img-4-b.jpg" style="margin-left: -10.5px; opacity: 1;"> 
   		    	</div>
   		   </div>
		    </div>
		</div>
		<div class="totop" id="goto">
		<i class="icontop"></i>
	</div>
	
	    <div class="footer">
			<div class="footertop">
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">我的三星</a>
					</li>
					<li>
						<a href="${path }/toorderlist">我的订单</a>
					</li>
					<li>
						<a href="##">我的评分</a>
					</li>
					<li>
						<a href="##">优惠券</a>
					</li>
					<li>
						<a href="##">个人资料</a>
					</li>
					<li>
						<a href="##">收货地点</a>
					</li>
					<li>
						<a href="##">售后网点查询</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">网上购物商城</a>
					</li>
					<li>
						<a href="##">购物指南</a>
					</li>
					<li>
						<a href="##">支付方式</a>
					</li>
					<li>
						<a href="##">订单及发票</a>
					</li>
					<li>
						<a href="##">关于配送</a>
					</li>
					<li>
						<a href="##">售后服务</a>
					</li>
					<li>
						<a href="##">会员及优惠</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">服务支持</a>
					</li>
					<li>
						<a href="##">常见问题</a>
					</li>
					<li>
						<a href="##">关于商城</a>
					</li>
					<li>
						<a href="##">关于三星</a>
					</li>
					<li>
						<a href="##">联系我们</a>
					</li>
					<li>
						<a href="##">使用条款</a>
					</li>
					<li>
						<a href="##">加为书签</a>
					</li>
				</ul> 
				<div class="way">
				<div class="sharing">官方分享</div>
			    <div class="sharingbtn">
				    <a href="##" class="weibo"></a>
				    <a href="##" class="wechat"></a>
			</div>
			</div>
			</div>
		</div>
	    
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
         var bannerlist = [
		{
			linkhref: "http://www.baidu.com",
			imgsrc: "img/mybanner1.jpg"
		},
		{
			linkhref: "http://www.baidu.com",
			imgsrc: "img/mybanner2.jpg"
		},
		{
			linkhref: "http://www.baidu.com",
			imgsrc: "img/mybanner3.jpg"
		},
		{
			linkhref: "http://www.baidu.com",
			imgsrc: "img/mybanner4.jpg"
		},
		{
			linkhref: "http://www.baidu.com",
			imgsrc: "img/mybanner5.jpg"
		}
	]
    var point = document.getElementById("point");
    var linodes = point.getElementsByTagName("li");
    var bigimg = document.getElementById("bigimg");
    var biglink = document.getElementById("biglink");
    var index = 0;

	var intervalId = setInterval(changeImg, 3000)

	function changeImg() {
		index = index + 1;
		if(index == 5) {
			index = 0;
		}
		bigimg.src = bannerlist[index].imgsrc;
		for(var i = 0; i < linodes.length; i++) {
			if(i == index) {
				linodes[i].className = "move";
			}
			else {
				linodes[i].className = "dot";
			}
		}
		biglink.href = bannerlist[index].linkhref;
	}
	
//	$(".dot").click(function(){
//		
//		$(".dot").removeClass("move");
//		$(this).addClass("move");
//	})
        var picArr=new Array("img/mybanner1.jpg","img/mybanner2.jpg","img/mybanner3.jpg","img/mybanner4.jpg","img/mybanner5.jpg");
        var index=0;
        function next(){
           index++;
           if(index==picArr.length){
                index=0;
           }
           document.getElementById("bigimg").src=picArr[index];
      }
        function pre(){
           index--;
           if(index<0){
                index=picArr.length-1;
           }
           document.getElementById("bigimg").src=picArr[index];
      }
        var goto = document.getElementById("goto");
    	goto.onclick = function(){
    		var intervalId = setInterval(function(){
    			if(document.documentElement.scrollTop<=0){
    				clearInterval(intervalId);
    			}else{
    			document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
    		    }
    		},1)
    	}
	</script>
</html>

